<template>
  <div>
    <!-- <div class="headerg">
      <div class="title_flex">
        <div>
          <img @click="PrevGo" class="Prev" src="../assets/images/app_fh.png" alt />
        </div>
        <div class="titg">朝天门街道</div>
      </div>
    </div> -->
     <header class="header">
        <div class="title">
         <img src="../assets/images/01_11.png" alt="" class="img_zuo" @click="PrevGo" />
          <div>{{name}}</div>
        </div>
    </header>
    <div class="nices"></div>
    <div class="user_flex" v-for="(item,index) in userArr" :key="index">
      <div class="user_name">
        <div>
          <img class="people" src="../assets/images/people.png" alt />
        </div>
        <div class="name_name">{{item.username}}</div>
      </div>
      <div class="user_name nice">
        <div>
          <img class="peoples" src="../assets/images/zw.png" alt />
        </div>
        <div class="name_names">{{item.zhiwu}}</div>
      </div>
      <div class="user_name">
            <a :href="'tel:'+item.phone">
                <div style="display:flex">
                    <div>
                <img class="peoplethree" src="../assets/images/dh.png" alt />
                </div>
                <div class="name_namet">{{item.phone}}</div>
                </div>
            </a>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
        userArr:[],
        id:'',
        name:''
    };
  },
  mounted () {
    var _this = this;
    
    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.PrevGo();
    // }, false);
  },
   created(){
     this.id = this.$route.query.id;
     this.name = this.$route.query.mc;
     this.listarry();
  },
  methods:{
    PrevGo() {
      this.$router.push("/address");
    },
    listarry(){
         this.axios
        .get(this.$global_msg.Url.hosted +"/showuserphonelist?dwid="+this.id)
        .then(res => {
          console.log(res);
          this.userArr = res.data.rows;
        }).catch( err=>{
            this.$terminal._error(err)
        })
    }
  },

};
</script>
<style scoped>
.headerg {
  position: fixed;
  height: 1.8519rem;
  width: 100%;
  background: #007aff;
  background-size: 100% 100%;
}
.title_flex {
  display: flex;
  align-items: center;
  color: #ffffff;
  text-align: center;
}
.titg {
  width: 100%;
  text-align: center;
  line-height: 1.8519rem;
  font-size: 0.444444rem;
}
.Prev {
  width: 0.2778rem;
  height: 0.4815rem;
  margin-left: 0.2667rem;
  line-height: 2.4rem;
}
.nices {
  padding-bottom:2rem;
}
.people {
  width: 0.392593rem;
  height: 0.392593rem;
}
.peoples{
    width: .592593rem;
    height: .418519rem;
}
.peoplethree{
    width: .55rem;
    height: .55rem;
    margin-top:-0.074074rem;
    margin-right: .037037rem;
}

.user_name {
  display: flex;
  padding-bottom: .37037rem;
}
.name_name {
  font-size:.407407rem;
  width:2rem;
  margin-left: .037037rem;
  margin-top: -0.074074rem;
}
.name_names {
  width:2.6rem;
  font-size:.407407rem;
  margin-top: -0.074074rem;
}
.name_namet {
  font-size:.407407rem;
}
.user_flex{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #E5E5E5;
    margin-top:.740741rem;
}
.header {
    height: 1.8519rem;
    background: url(../assets/images/home_bg.png) no-repeat;
    background-size: 100% 100%;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
</style>
